// 创建一个路由器，并暴露出去

// 第一步：导入 createRouter 方法
import { createRouter, createWebHistory } from 'vue-router'

import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'

// 第二步：创建路由器
const router = createRouter({
  history: createWebHistory(), // 路由器的工作模式，vue3要有
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/news',
      component: News
    },
    {
      path: '/about',
      component: About
    }
  ]
})

export default router

/**
 * 【两个注意点】
 * 1、路由组件通常存放在pages或views文件夹，一般组件通常存放在components文件夹。
 * 2、通过点击导航，视觉效果上“消息”了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
 * 
 * 路由组件：靠路由的规则渲染出来的。
 * 一般组件：亲手写标签出来的 <Demo />
 * 
 */